<template>
	<view>
		<view class="full" @click="closeFull"></view>
		
		<view class="login-out">
			<view><b>筛选条件</b></view>
			<!-- <view>工单日期范围</view> -->
			<view class="work-date" @click="showDate(true)">年份<view class="fr">{{ year=='' ? '请选择':year }}<image mode='aspectFit' src="/static/img/arrow.png" class="work-date-icon"></image></view></view>
			<!-- <view class="work-date" @click="showDate(false)">周期<view class="fr">{{ group=='' ? '请选择':group }}<image mode='aspectFit' src="/static/img/arrow.png" class="work-date-icon"></image></view></view> -->
			
			<view class="btn"><button class="cancel-btn" @click="reset"><b>重置</b></button><button class="default-btn fr" @click="ok"><b>确定</b></button></view>
		</view>
		
		<view class="full full2" v-show="show_date"></view>
		<u-select v-model="show_date" :list="columns" label-name="text" @confirm="onConfirm" @cancel="cancel"></u-select>
	</view>
</template>

<script>
export default{
	data() {
		return {
			columns : [],
			currentDate : new Date(),
			year : '',
			group : '',
			type: '',
			show_date : false
		}
	},
	created() {
		this.setYears();
	},
	methods:{
		closeFull() {
			this.$emit('closeFull');
		},
		showDate(bol) {
			this.type = bol;
			this.show_date = true;
		},
		reset() {
			this.currentDate = new Date();
			this.year = '';
			this.group = '';
		},
		cancel() {
			this.show_date = false;
		},
		ok() {
			let obj = {
				year : this.year,
				group : this.group
			}
			this.$emit('closeFull',obj);
		},
		onConfirm(value,index) {
			this.type ? this.year = value[0].label : this.group = value[0].label;
			this.cancel();
		},
		setYears() {
			//获取到从那一年开始
			let smallYears = 1990;
			//获取当前时间
			let date = new Date();
			let nowYears = date.getFullYear();
			let Years = nowYears - smallYears;
			for (var i = 0; i <= Years; i++) {
			    this.columns.push({text:nowYears--,value:''});
			}
			// arrYear.forEach(ele => {
			//     //下拉框的数组
			//     this.yearsData.push({
			//         value: ele,
			//         label: ele + '年'
			//     })
			// })
		}
	}
}
</script>

<style scoped>
	.login-out{
		padding: 26px 0 0 26px;
	}
	.login-out>view:nth-child(1){
		color: #3E3A39;margin-bottom: 16px;
	}
	.login-out>view:nth-child(2){
		color: #3E3A39;font-size: 14px;margin-bottom: 12px;
	}
	.work-date{
		line-height: 50px;border-bottom: 1px solid #d7d7d7;color: #3E3A39;font-size: 14px;padding-right: 27px;
	}
	.work-date-icon{
		width: 15px;height: 15px;vertical-align: middle;
		margin-left: 10px;
	}
	.btn{
		position: absolute;width: 100%;bottom: 5%;left: 0;padding: 0 15px;
	}
	.default-btn,.cancel-btn{
		width: 47%;display: inline-block;
	}
	.full2{
		z-index: 99;
	}
</style>
